<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/jquery-1.11.2.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <style>
        body {
            padding: 10px;
            /* margin-bottom: -1;*/
        }
    </style>
</head>
<body>
<!--panel  dashboard-->
<h3>基础面板</h3>
<div class="panel panel-default">
<div class="panel-body">
    这是一个面板
</div>
</div>
<h3>带有头部和尾部的面板</h3>
<div class="panel panel-default">
    <div class="panel-heading"> bootstrp-panel头部</div>
    <div class="panel-body">panel 中间 </div>
    <div class="panel-footer"> panel 底部</div>
</div>
<h3>彩色面板</h3>
<div class="panel panel-success">
    <div class="panel-heading"> bootstrp-panel头部</div>
    <div class="panel-body">panel 中间 </div>
    <div class="panel-footer"> panel 底部</div>
</div>
<hr>
<h3>添加表格</h3>
<div class="panel panel-success">
    <div class="panel-heading"> bootstrp-panel头部</div>
    <div class="panel-body">
    <p>bootstrap是一种js技术</p>
    <table class="table table-bordered">
        <tr>
            <th>ID</th>
            <th>课程</th>
            <th>作者</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>HTML</td>
            <td>一一</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>java</td>
            <td>一一</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>oracel</td>
            <td>一一</td>
        </tr>
    </table>
    </div>
    <div class="panel-footer"> panel 底部</div>
</div>
</body>
</html>
